<template>
  <!--模板-->
  <h1>测试 状态工厂</h1>
  {{ person }}<br>
  <el-button type="" @click="updateName">修改</el-button><br>
  <el-button type="" @click="set2">整体赋值</el-button><br>
  <el-button type="" @click="set3">部分赋值</el-button><br>
 
</template>


<script setup lang="ts" generic="T extends {name: string}">
// ×✔√✘
  import { reactive, watch, nextTick } from 'vue'
  import { useState, lineCode } from '../../../lib/main'

  const flag = 'useState 实例化用时：'
  console.time(flag)
  const person = useState({
    name: '基础类型，初始值',
    age:20
  })
  console.timeEnd(flag)

  // 代码定位
  lineCode(person)

  console.log('看看结构：', person)

  console.log('看看keys：', Object.keys(person))
  // 获取原型
  const foo = person.$toRaw()
  console.log('看看原型：', foo)

  const updateName = () => {
    person.name = '单独修改属性：' +  new Date().valueOf().toString()
  }
 
  const set2 = () => {
    person.$state = {
      name: 'state 赋值aaa',
      age: 30
    }
  }
  
  const set3 = () => {
    person.$patch({
      name: 'state 赋值aaa'
    })
  }

</script>